<!-- 表单新增 -->

<template>
  <WebForm path="add">
    <EasyRow col2>
      <FormInput :label="`${CORE.MAP.ORGAN}名称`" bind="name" :max="20" required />
      <FormInput :label="`${CORE.MAP.ORGAN}编号`" bind="code" :max="20" required />
    </EasyRow>

    <MyUser />

    <FormTree :label="`上级${CORE.MAP.ORGAN}`" bind="parentId" :dict="treeDict" allName noClear required />

    <FormTree :label="`所在${CORE.MAP.REGION}`" bind="regionId, regionName" :dict="CORE.REGION.DICT" allName />

    <EasyRow col2>
      <FormSelect
        :label="`${CORE.MAP.ORGAN}类型`"
        bind="organTypeId, organTypeValue"
        :dict="CORE.DICT.dept_type"
        required
      />
      <FormNum :label="`${CORE.MAP.ORGAN}排序`" bind="sort" :min="1" :max="999" tip="请输入" required />
    </EasyRow>

    <FormCheckbox label="应用范围" bind="applicationScope" :dict="DICT.SCOPE" />

    <FormTextarea :label="`${CORE.MAP.ORGAN}描述`" bind="describe" :max="20" :rows="2" />

    <EasyRow v-for="(item, i) in one.propList" :key="item.label" flex>
      <FormTextarea v-bind="getPropertyProps(item)" />
      <FormSlot noLabel flex0>
        <BtnDanger plain @click="delProp(i)"><i class="el-icon-minus" /></BtnDanger>
      </FormSlot>
    </EasyRow>
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import DeviceBase from '@admin/components/detail/DetailDevice/MyDetail/DeviceBase'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormAdd',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('add'), CORE.mixTree()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 删除属性
     */
    delProp(i) {
      this.one.propList.splice(i, 1)
    },

    /**
     * 获取动态属性的属性
     */
    getPropertyProps(item) {
      return {
        one: item,
        label: item.label,
        bind: 'value',
        rows: 2,
        max: 100,
        words: this.getWords(item.label),
      }
    },

    /**
     * 获取汉字数
     */
    getWords: DeviceBase.methods.getWords,
  },
}
</script>
